<!--底部栏-->
<template>
  <div class="container">
    <!-- WAP和PC的返回顶部栏的位置不同 -->
    <img class="hidden-in-xs to-top" src="../assets/置顶1.png" alt="">
    <img class="xs-only to-top" src="../assets/置顶.png" alt="">
    <!-- 分上下两部，顶部是公司的信息 -->
    <div class="top">
      <div class="center-container">
        <img class="er-code" :src="$api+footer.er_code.cf_value" alt="">
        <!-- 分三部分 -->
        <div class="item1">
          <p class="title">欢迎来到{{footer.company_name.cf_value}}</p>
          <p class="hidden-in-xs content">
            公司名称：{{footer.company_name.cf_value}}
          </p>
          <p class="content">
            {{footer.company_name.cf_value}}
          </p>
          <p class="content">
            厂址：{{footer.company_address.cf_value}}
          </p>
          <p class="hidden-in-xs content">
            {{footer.company_address.cf_value}}
          </p>
        </div>
        <div class="item2">
          <p class="title">联系我们</p>
          <p class="content">邮编：{{footer.zip_code.cf_value}}</p>
          <p class="content">热线电话：{{footer.phone_number.cf_value}}</p>
        </div>
        <div class="item3">
          <p class="title">反馈意见</p>
          <div>
            <input type="text" placeholder="您的反馈意见将为我们提供很大的帮助呢！">
            <button class="btn">提交</button>
          </div>
          <p class="content hidden-in-xs">您宝贵的意见将为我们提供很大的帮助呢！</p>
        </div>
      </div>
    </div>
    <!-- 分上下两部，底部是备案的信息 -->
    <div class="bottom">
      <p class="content">
        www.MetInfo.cn
      </p>
      <p class="content">
        Powered by MetInfo 5.3.19 ©2008-2018 版权所有 2008-2014 湘ICP备8888888
      </p>
    </div>
  </div>
</template>
<style lang="less" scoped>
  @import url('../style/mixin.less');
  .container {
    width: 100%;
    float: left;
    position: relative;
    .title {
      font-family: FZLTCHK--GBK1-0;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 24px;
      letter-spacing: 1px;
      color: #909399;
      .On-xs( {
        font-family: FZLTCHK--GBK1-0;
        font-size: 12px;
        letter-spacing: 0px;
        line-height: 12px;
      }
      )
    }
    .content {
      font-family: MicrosoftYaHei;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 24px;
      letter-spacing: 0px;
      color: #909399;
      .On-xs( {
        font-size: 10px;
        line-height: 14px;
        letter-spacing: 0px;
      }
      )
    }
    .to-top {
      width: 52px;
      height: 52px;
      position: absolute;
      top: -25px;
      .On-xs( {
        width: 40px;
        height: 40px;
        top: -40px;
        right: 19px;
      }
      )
    }
    .top {
      width: 100%;
      height: 219px;
      background: #ecedee;
      border-bottom: 1px solid #909399;
      .center-container {
        width: 1200px;
        height: 219px;
        margin: 0 auto;
        display: inline-block;
        position: relative;
        .On-xs( {
          width: 100%;
        }
        );
        .er-code {
          float: left;
          display: inline-block;
          margin-top: 80px;
          width: 100px;
          height: 100px;
          .On-xs( {
            width: 60px;
            height: 60px;
            margin: 0;
            position: absolute;
            right: 19px;
            top: 79px;
          }
          )
        }
        .item1 {
          width: 278px;
          height: 219px;
          text-align: left;
          float: left;
          margin-left: 22px;
          .On-xs( {
            width: calc(100% - 20px);
            height: unset;
            margin-left: 20px;
          }
          );
          .title {
            width: 278px;
            height: 17px;
            margin-top: 51px;
            margin-bottom: 19px;
            line-height: 24px;
            .On-xs( {
              margin-top: 24px;
              margin-bottom: 11px;
            }
            );
          }
          .content {
            width: 278px;
            height: 21px;
            line-height: 21px;
            .On-xs( {
              height: 12.5px;
              line-height: 12.5px;
            }
            )
          }
        }
        .item2 {
          width: 157px;
          height: 219px;
          float: left;
          text-align: left;
          margin-left: 119px;
          .On-xs( {
            width: calc(100% - 20px);
            height: unset;
            margin-left: 20px;
          }
          );
          .title {
            width: 157px;
            height: 17px;
            margin-top: 51px;
            margin-bottom: 54px;
            line-height: 24px;
            .On-xs( {
              width: 131px;
              margin-top: 12px;
              margin-bottom: 13px;
            }
            )
          }
          .content {
            .On-xs( {
              height: 12px;
              line-height: 12px;
            }
            )
          }
        }
        .item3 {
          width: 380px;
          height: 219px;
          float: left;
          text-align: left;
          margin-left: 143px;
          .On-xs( {
            width: calc(100% - 20px);
            height: 51px;
            margin-left: 20px;
          }
          );
          .title {
            margin-top: 51px;
            .On-xs( {
              margin-top: 11px;
            }
            );
          }
          div {
            width: 100%;
            height: 30px;
            margin-top: 51px;
            margin-bottom: 5px;
            .On-xs( {
              margin-top: 9px;
              margin-bottom: 0;
            }
            );
            input {
              width: 280px;
              height: 30px;
              border: 1px solid #909399;
              background: none;
              margin-right: 19px;
              box-sizing: border-box;
              float: left;
              .Bigger-then-xs( {
                .placeholder( {
                  color: #ecedee;
                }
                );
              }
              );
              .On-xs( {
                width: 260px;
                margin-right: 10px;
                .placeholder( {}
                );
              }
              );
            }
            button {
              width: 80px;
              height: 30px;
              float: left;
              background: #909399;
              color: #FFF;
              .On-xs( {
                width: 66px;
                border-radius: 3px;
              }
              )
            }
          }
        }
      }
    }
    .bottom {
      width: 100%;
      height: 66px;
      background: #ecedee;
      .On-xs( {
        height: 49px;
      }
      );
      .content {
        line-height: 19px;
        .On-xs( {
          line-height: 11.5px;
        }
        );
        &:first-child {
          padding-top: 13px;
          .On-xs( {
            padding-top: 8px;
          }
          )
        }
      }
    }
  }

</style>
<script>
  export default {
    data() {
      return {
        footer: {}
      }
    },
    created: function () {
      let that = this;
      this.$axios.get(this.$api+'/api/footer').
      then(function (response) {
          that.footer = response.data.footer
        })
        .catch(function (response) {

        });
    }
  }

</script>
